<!-- 资金明细页面 -->
<template>
    <div>
        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-form-item class="query-form-item">
                <el-input v-model="query.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 用户资金信息主列表 -->
        <el-table
            @sort-change="sortChange"
            :data="list"
            style="width: 100%;"
            @row-click="handleUserClick">
            <el-table-column
                label="用户名"
                prop="username"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                label="用户实名"
                prop="realName"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                label="最后登录时间"
                prop="lastLoginTime"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                sortable
                label="可用余额"
                prop="balance"
                :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{ scope.row.balance || 0}}
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            :page-size="5"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total">
        </el-pagination>
        <el-divider content-position="left">资金明细</el-divider>

        <!-- 用户资金明细子列表 -->
        <el-table
            :data="selectedUserDetails"
            style="width: 100%; margin-top: 20px;">
            <el-table-column
                label="时间"
                prop="createTime"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                label="变动金额"
                prop="amount"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                label="变动类型"
                prop="type"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                label="当前余额"
                prop="balance"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                label="备注"
                prop="remark"
                :show-overflow-tooltip="true">
            </el-table-column>
        </el-table>
        <el-pagination
            :page-size="10"
            @current-change="handleCurrentChange2"
            layout="prev, pager, next"
            :total="total2">
        </el-pagination>
    </div>
</template>

<script>
import { list} from "../../api/dnf/userbill";
import {authAdminList} from "../../api/auth/authAdmin";
export default {
    data() {
        return {
            list: [],
            selectedUser: '',
            total: 0,
            total2: 0,
            query:{
                page: 1,
                sort: "desc"
            },
            query2:{
                page: 1,
            },
            userFunds: [
                {
                    userId: 'AA'
                }
            ], // 用户资金信息列表
            selectedUserDetails: [

            ] // 选中用户的资金明细
        };
    },
    created() {
        // 将参数拷贝进查询对象
        // let query = this.$route.query;
        // this.query = Object.assign(this.query, query);
        // this.query.limit = parseInt(this.query.limit);
        // 加载表格数据
        this.getList();
    },
    methods: {
        onReset() {
            this.$router.push({
                path: ""
            });

            this.query = {
                title: "",
                page: 1,
                limit: 5
            };
            this.getList();
        },
        onSubmit() {
            this.$router.push({
                path: "",
                query: this.query
            });
            this.getList();
        },
        getList() {
            this.loading = true;
            authAdminList({
                ...this.query,
                limit: 5,
            })
                .then(response => {
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        handleCurrentChange2(val){
            this.query2.page = val;
            this.getUserDetails(this.selectedUser);
        },
        handleSizeChange(val) {
            this.query.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        },
        // 获取用户资金信息
        fetchUserFunds() {
            // 这里调用 API 获取用户资金信息
            // 假设 API 返回的数据格式为 [{ userId, userName, totalFunds, availableFunds, frozenFunds }, ...]
            // this.userFunds = response.data;
        },
        sortChange(data, prop, order ){
            console.log("==========>",data)
            if (data.order){
                if (data.order == "descending"){
                    this.query.sort = "desc"
                }else if(data.order == "ascending"){
                    this.query.sort = "asc";
                }
                this.getList();
            }
        },
        // 处理用户点击事件
        handleUserClick(row) {
            // 这里调用 API 获取选中用户的资金明细
            // 假设 API 返回的数据格式为 [{ date, amount, type, remark }, ...]
            // this.selectedUserDetails = response.data;
            this.getUserDetails(row.id); // 获取选中用户的资金明细
        },
        // 获取选中用户的资金明细
        getUserDetails(userId) {
            this.selectedUser = userId;
            // 这里调用 API 获取用户资金明细
            this.loading = true;
            list({
                userId: userId,
                page: this.query2.page,
                limit: 10
            })
                .then(response => {
                    this.loading = false;
                    this.selectedUserDetails = response.data.records || [];
                    this.total2 = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.selectedUserDetails = [];
                    this.total2 = 0;
                });
        }
    },
    mounted() {
        this.fetchUserFunds(); // 组件挂载时获取用户资金信息
    }
};
</script>

<style scoped>
/* 添加样式 */
</style>
